<template>
	<view class="page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl" :style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class="" :style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'" @click="navToBack" :src="xcxImgUrl && xcxImgUrl+'fanhui.svg'" style="width: 36rpx;height: 36rpx;">
			</image>
			<text :slot="'content'">退款详情</text>
		</navBar>

		<scroll-view scroll-y :style="{'height': 'calc(100vh - ' + statusBarHeights+'px - '+ hieghts +'px)'}"
			class="main_refundDetails pd_lr10">

			<view class="main_refundDetails_top mt10">
				<view class="main_refundDetails_top_title">
					处理进度:
					<text v-if="commonityItem.status == 1" class="ml5 main_refundDetails_top_title_one">申请中</text>

					<text v-if="commonityItem.status == 4" class="ml5 main_refundDetails_top_title_one">申请失败</text>

					<text v-if="commonityItem.status == 3" class="ml5 main_refundDetails_top_title_one">已完成</text>

					<text v-if="commonityItem.returnType && commonityItem.returnType != 2 &&
					 [6].includes(commonityItem.status)" class="ml5 main_refundDetails_top_title_one">待寄回</text>
					<text v-if="commonityItem.returnType &&
					 commonityItem.returnType == 2 && [2].includes(commonityItem.status)" class="ml5 main_refundDetails_top_title_one">待退款</text>

					<text v-if="commonityItem.returnType &&
					 commonityItem.returnType != 2 &&commonityItem.status == 2" class="ml5 main_refundDetails_top_title_one">寄回中</text>

					<text v-if="commonityItem.status == 5" class="ml5 main_refundDetails_top_title_one">已取消</text>
				</view>
				<view v-if="commonityItem.status == 4" class="main_refundDetails_top_title">
					处理说明:
					<text class="ml5 main_refundDetails_top_title_one">
						{{commonityItem.checkExplain || `-`}}
					</text>


				</view>
			</view>

			<!-- 商品信息 -->
			<view class="mian_allOrder_list_item mb10 mt10">
				<view class="list_item_top pd_lr10">
					<view class="list_item_top_left">
						退款商品
					</view>

					<view class="list_item_top_right">
						共:{{  totalCount ? Utils.formatToFixed(totalCount,'number') : 0}}  件
					</view>
				</view>
				<!-- 商品信息 -->
				<view v-for="(it,inx) in commonityItem.commodityInfo" :key="inx" class="list_item_conter pd10">
					<view class="list_item_conter_top" @click="toDetails(it)">
						<view class="list_item_conter_top_img" @click="toDetails(it)" v-if="updateNoneImg">
							<image
								:src=" it.spuInfo && it.spuInfo.picture ? uploadImgUrl + it.spuInfo.picture : computedMorentu">
							</image>
						</view>
						<view class="list_item_conter_top_text ml5">
							<view class="list_item_conter_top_text_top texttowShow" @click="toDetails(it)">
								{{it.spuInfo && it.spuInfo.name ? it.spuInfo.name : ''}}
							</view>
							<template v-if="commonityItem.type == 1">
								<view v-for="(itCd,inxCd) in it.children" :key="inxCd"
									class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
											{{
										itCd.skuInfo &&
										itCd.skuInfo.unitInfo && 
										itCd.skuInfo.unitInfo.name &&
										itCd.skuInfo.specsOptionInfo && 
										itCd.skuInfo.specsOptionInfo.length ? 
										itCd.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
										'/' +
										itCd.skuInfo.unitInfo.name :
										itCd.skuInfo.unitInfo.name
										
									}}
										</text>
										<text class="list_item_conter_top_text_bom_item_r">
											<text>￥{{itCd.price ? Utils.formatToFixed(itCd.price,'price') : 0}}</text>
											<text>X{{itCd.qty ? itCd.qty : 0}}</text>
										</text>
									</view>
								</view>
							</template>
							<template v-if="commonityItem.type == 2">
								<view class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
											{{
										it.skuInfo &&
										it.skuInfo.unitInfo && 
										it.skuInfo.unitInfo.name &&
										it.skuInfo.specsOptionInfo && 
										it.skuInfo.specsOptionInfo.length ? 
										it.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
										'/' +
										it.skuInfo.unitInfo.name :
										it.skuInfo.unitInfo.name
										
									}}
										</text>
										<text class="list_item_conter_top_text_bom_item_r">
											<text>￥{{it.price ? Utils.formatToFixed(it.price,'price') : 0}}</text>
											<text>X{{it.qty ? it.qty : 0}}</text>
										</text>
									</view>
									<!-- 满减 -->
									<view v-if="commonityItem.type == 2 && commonityItem.activityType == 2"
										class="biaoqian mt10">
										优惠:{{it.preferential ? Utils.formatToFixed(it.preferential,'money') : 0}}元
									</view>
								</view>
							</template>
						</view>
					</view>
					<!-- 活动赠品信息 //订单类型[1：普通订单 2：促销订单] -->
					<template
						v-if="commonityItem.type == 2 && commonityItem.activityType == 1 && it.children &&  it.children.length">
						<view v-for="(itc,inxc) in it.children" class="list_item_conter_bom mt10">
							<view class="list_item_conter_top_img" v-if="updateNoneImg">
								<image class="zenpin" :src="xcxImgUrl && xcxImgUrl+'page_public/static/zengpin.svg'"></image>
								<image
									:src=" itc.spuInfo && itc.spuInfo.picture ? uploadImgUrl + itc.spuInfo.picture : computedMorentu">
								</image>
							</view>
							<view class="list_item_conter_top_text ml5">
								<view class="list_item_conter_top_text_top texttowShow">
									{{itc.spuInfo && itc.spuInfo.name ? itc.spuInfo.name : 0}}
								</view>
								<view class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
											{{
											itc.skuInfo &&
											itc.skuInfo.unitInfo && 
											itc.skuInfo.unitInfo.name &&
											itc.skuInfo.specsOptionInfo && 
											itc.skuInfo.specsOptionInfo.length ? 
											itc.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
											'/' +
											itc.skuInfo.unitInfo.name :
											itc.skuInfo.unitInfo.name
											
										}}
										</text>
										<text class="list_item_conter_top_text_bom_item_r">
											X{{itc.qty ? itc.qty : 0}}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>

			</view>

			<view class="mian_refundDetails_tails mt10 pd10">
				<view class="mian_refundDetails_tails_title ">
					订单详情
				</view>
				<view class="mian_refundDetails_tails_item">
					<view class="mian_refundDetails_tails_item_l">
						退款总金额
					</view>
					<view class="mian_refundDetails_tails_item_r">
						{{Utils.formatToFixed(commonityItem.money,'money')}}元
					</view>
				</view>
				<view class="mian_refundDetails_tails_item">
					<view class="mian_refundDetails_tails_item_l">
						<!-- 退货类型[1.仅退货  2.仅退款  3.退货退款] -->
						退货类型
					</view>
					<view class="mian_refundDetails_tails_item_r">
						{{commonityItem.returnType && commonityItem.returnType == 1 ? '仅退货' :
					 commonityItem.returnType && commonityItem.returnType == 2 ? '仅退款' :
					 commonityItem.returnType && commonityItem.returnType == 3 ? '退货退款' : '-'}}
					</view>
				</view>
				<view class="mian_refundDetails_tails_item" style="align-items: flex-start;">
					<view class="mian_refundDetails_tails_item_l mian_refundDetails_tails_item_l_width">
						退款原因
					</view>
					<!-- <view class="mian_refundDetails_tails_item_r">
						{{commonityItem.summary ? commonityItem.summary : '-'}}
					</view> -->
					<u-textarea confirmType="done"
					height='100'
					border='none'
					v-model="commonityItem.summary"></u-textarea> 
				</view>
				<view class="mian_refundDetails_tails_item">
					<view class="mian_refundDetails_tails_item_l">
						申请时间
					</view>
					<view class="mian_refundDetails_tails_item_r">
						{{commonityItem.createTime ? Utils.DateFormateArr(commonityItem.createTime,'nyr') : '-'}}
					</view>
				</view>
				<view class="mian_refundDetails_tails_item">
					<view class="mian_refundDetails_tails_item_l">
						退款编号
					</view>
					<view class="mian_refundDetails_tails_item_r">
						{{commonityItem.number ? commonityItem.number : '-'}}
					</view>
				</view>
				<view class="mian_refundDetails_tails_img">
					<view class="mian_refundDetails_tails_img_l">
						退款凭证
					</view>
					<view class="mian_refundDetails_tails_img_r">
						<image :src="commonityItem.fileUrl1 ? commonityItem.fileUrl1 : ''" ></image>
						<image :src="commonityItem.fileUrl2 ? commonityItem.fileUrl2 : ''" ></image>
						<image :src="commonityItem.fileUrl3 ? commonityItem.fileUrl3 : ''" ></image>

					</view>
				</view>
				
				
			</view>

		</scroll-view>
		<view
			style="color:#fff;background:rgba(236, 65, 65, 1);z-index: 1000;height:100rpx;width: 100%;position: fixed;bottom:0;left:0;display: flex;justify-content: center;align-items: center;"
			v-if="commonityItem && commonityItem.status && commonityItem.status == 1" @click="quxiaoShenqing(commonityItem)">取消申请</view>
		<view
			style="color:#000;background:#fff;height:100rpx;width: 100%;position: fixed;bottom:0;left:0;display: flex;justify-content: center;align-items: center;"
			v-if="commonityItem && commonityItem.returnType &&commonityItem.returnType != 2 &&commonityItem.status == 2" @click="chakanwuliu(commonityItem)">查看物流</view>
			<view
			@click.stop="lijiJijian"
			v-if="commonityItem.returnType && commonityItem.returnType != 2 && [6].includes(commonityItem.status)"
			class="list_item_btn_item">
				立即寄件
			</view>
		<!-- 模态框确认 -->
		<u-modal 
		:show="modalShow" 
		:title="modalInfo.title" 
		showConfirmButton
		showCancelButton
		@confirm='modalConfirm'
		@cancel='modalShow = false'
		:content='modalInfo.content'>
		
		</u-modal>
		
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		uploadImgUrl
	} from '@/utils/request.js'
	import {closeMallOrderReturn} from "@/api/global.js"
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
			//返回默认图
			computedMorentu() {
				return this.$store.state.morentu
			},
			//返回有图无图控制
			updateNoneImg() {
				return this.$store.state.configSetting.noneImge == 1 ? false : true
			},
		},
		data() {
			return {
				totalCount:'',//共多少件
				statusBarHeights:``,
				hieghts:``,
				modalShow:false,//模态框
				modalInfo:{ //模态框提示对象内容
					title:'温馨提示',
					content:''
				},
				returnId:'',//退货id
				modalType:0,//区分模态确认后点击事件
				uploadImgUrl,
				statusBarHeight: '',
				height: '',
				commonityItem: {}, //商品信息
				returnId:''
			};
		},
		onLoad(options) {
			//获取退货单号
			console.log(options);
			this.returnId = options?.returnId || ''
			
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				this.statusBarHeights = this.$store.state.statusBarHeight;
				this.hieghts = (this.$store.state.navBarHeight);
				//获取高度
				this.Utils.getDemoTopHeight('main_refundDetails')

				//读取商品信息
				this.commonityItem = this.$store?.state?.commonityItem
				console.log(this.commonityItem,'this.commonityItem');
				let qtyArr = []
				 this.commonityItem.commodityInfo.forEach((item) => {
					 if(item.children){
						 qtyArr.push(...item.children.map(item => item.qty))
					 }
					
				} )
				console.log(qtyArr,'qtyArr');
				if(this.commonityItem.type == 2 ) {
					qtyArr = [...qtyArr,this.commonityItem.qty]
				}
				this.totalCount = qtyArr.reduce(((prev,next )=> prev + next) , 0)
				console.log(this.totalCount,'this.totalCount');
			})
		},
		methods: {
			//去商品详情
			toDetails(item) {
							console.log(item);
							uni.navigateTo({
								url: `/page_public/commodityDetail?commodityId=${item.commodityId}`
							})
						},
			//查看物流
			chakanwuliu(item){
				uni.navigateTo({
					url:`/page_public/logisticsDetails?id=${item.returnId}&route=refund`
				})
			},
			lijiJijian(){
				uni.navigateTo({
					url:`/page_public/mailingAddress?returnId=${this.returnId}`
				})
			},
			//取消申请
			quxiaoShenqing(item){
				this.modalShow = true
				this.modalInfo.content = '是否取消申请当前售后信息？？？'
				this.returnId = item?.returnId || ''
				this.modalType = 1//取消申请
			},
			//模态确定
			async modalConfirm(){
				if(this.modalType == 1){ //取消申请操作
					let res = await closeMallOrderReturn({
						returnId:this.returnId
					})
					if(res.code == 2000){
						this.Utils.toast(`取消成功`)
						this.modalShow = false
						setTimeout(() => {
							uni.navigateBack();
						},1000)
					}else{
						this.Utils.toast(`${res.msg}`)
					}
				}
				
				
			},
			//返回上一级
			navToBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-modal__button-group__wrapper--confirm.u-modal__button-group__wrapper--confirm  {
		background-color: #ec4141;
		
		.u-modal__button-group__wrapper__text {
			color: #FFF !important;
		}
	}
	.main_refundDetails {
		width: 100%;
		box-sizing: border-box;

		.main_refundDetails_top {
			width: 100%;
			background-color: #FFF;
			border-radius: $border_radius_10;
			box-sizing: border-box;
			padding: 40rpx 20rpx;

			.main_refundDetails_top_title {
				font-size: $font_size_14;
				color: $text_color_808080;

				.main_refundDetails_top_title_one {
					color: $text_color_333;
				}
			}
		}

		.mian_allOrder_list_item {
			background-color: #FFF;
			width: 100%;
			border-radius: $border_radius_10;

			.list_item_top {
				height: 88rpx;
				border-bottom: 1px solid #f3f3f3;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $text_color_333;

				.list_item_top_left {
					font-size: 32rpx;
					color: $text_color_333;
					font-weight: bold;
				}

				.list_item_top_right {
					font-size: $font_size_14;
				}
			}

			.list_item_conter {
				border-bottom: 1px solid #f3f3f3;

				.list_item_conter_top,
				.list_item_conter_bom {
					display: flex;

					.list_item_conter_top_img {
						position: relative;
						border-radius: $border_radius_4;
						width: 160rpx;
						height: 160rpx;

						.zenpin {
							position: absolute;
							left: 0;
							top: 0;
							z-index: 999;
							width: 80rpx;
							height: 32rpx;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}

					.list_item_conter_top_text {
						flex: 1;

						.list_item_conter_top_text_top {
							font-size: $font_size_12;
							color: $text_color_333;
						}

						.list_item_conter_top_text_bom {
							.list_item_conter_top_text_bom_item {
								font-size: $font_size_12;
								display: flex;
								justify-content: space-between;

								.list_item_conter_top_text_bom_item_l {
									color: $text_color_808080;
								}

								.list_item_conter_top_text_bom_item_r {
									color: $text_color_333;
								}
							}

							.biaoqian {
								font-size: $font_size_12;
								color: $text_color_ec4141;
								padding: 4rpx;
								background-color: rgba(255, 227, 227, 1);
								width: 150rpx;
								max-width: 300rpx;
								border-radius: $border_radius_4;
								text-align: center;
								float: right;
							}
						}
					}
				}

				.list_item_conter_bom {
					margin-left: 100rpx;
				}
			}

		}

		.mian_refundDetails_tails {
			width: 100%;
			border-radius: $border_radius_10;
			background-color: #FFF;
			box-sizing: border-box;

			.mian_refundDetails_tails_title {
				height: 88rpx;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: $text_color_333;
				border-bottom: 1px solid #f3f3f3;
			}

			.mian_refundDetails_tails_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				min-height: 88rpx;
				font-size: $font_size_14;
				border-bottom: 1px solid #f3f3f3;

				.mian_refundDetails_tails_item_l {
					color: $text_color_808080;
				}
				.mian_refundDetails_tails_item_l_width{
					width: 200rpx;
					margin-right: 20rpx;
					align-items:flex-start
				}
				

				.mian_refundDetails_tails_item_r {
					color: $text_color_333;
					max-width: calc(100% - 220rpx);
				}
			}

			.mian_refundDetails_tails_img {
				.mian_refundDetails_tails_img_l {
					height: 88rpx;
					line-height: 88rpx;
					font-size: $font_size_14;
					color: $text_color_808080;
				}

				.mian_refundDetails_tails_img_r {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
                   padding-bottom: 120rpx;
					image {
						width: 160rpx;
						height: 160rpx;
					}
				}
			}	
				
		}
		
	}
	.list_item_btn_item{
		    border-width: 0px;
		    position: fixed;
		    left: 0rpx;
		    bottom: 0rpx;
		    width: 100%;
		    height: 100rpx;
		    background: inherit;
		    background-color: rgba(236, 65, 65, 1);
		    font-weight: 700;
		    font-style: normal;
		    font-size: 32rpx;
		    color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
	}
</style>